<template>
  <el-collapse>
    <el-collapse-item title="消息列表配置">
      <text-add-button text="创建消息" @click="handleAdd('message')"></text-add-button>
      <el-table :data="messageEvents" v-if="messageEvents.length">
        <el-table-column label="唯一标识" prop="id" align="center"></el-table-column>
        <el-table-column label="消息名称" prop="name" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <text-edit-button @click="handleEdit('message', scope.row)">编辑</text-edit-button>
            <text-delete-button @click="handleDelete('message', scope.row)">删除</text-delete-button>
          </template>
        </el-table-column>
      </el-table>
    </el-collapse-item>
    <el-collapse-item title="错误列表配置">
      <text-add-button text="创建错误" @click="handleAdd('error')"></text-add-button>
      <el-table :data="errorEvents" v-if="errorEvents.length">
        <el-table-column label="唯一标识" prop="id" align="center"></el-table-column>
        <el-table-column label="错误名称" prop="name" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <text-edit-button @click="handleEdit('error', scope.row)">编辑</text-edit-button>
            <text-delete-button @click="handleDelete('error', scope.row)">删除</text-delete-button>
          </template>
        </el-table-column>
      </el-table>
    </el-collapse-item>
    <el-collapse-item title="信号列表配置">
      <text-add-button text="创建信号" @click="handleAdd('signal')"></text-add-button>
      <el-table :data="signalEvents" v-if="signalEvents.length">
        <el-table-column label="唯一标识" prop="id" align="center"></el-table-column>
        <el-table-column label="信号名称" prop="name" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <text-edit-button @click="handleEdit('signal', scope.row)">编辑</text-edit-button>
            <text-delete-button @click="handleDelete('signal', scope.row)">删除</text-delete-button>
          </template>
        </el-table-column>
      </el-table>
    </el-collapse-item>
    <el-collapse-item title="升级列表配置">
      <text-add-button text="创建升级" @click="handleAdd('escalation')"></text-add-button>
      <el-table :data="escalationEvents" v-if="escalationEvents.length">
        <el-table-column label="唯一标识" prop="id" align="center"></el-table-column>
        <el-table-column label="升级名称" prop="name" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <text-edit-button @click="handleEdit('escalation', scope.row)">编辑</text-edit-button>
            <text-delete-button @click="handleDelete('escalation', scope.row)">删除</text-delete-button>
          </template>
        </el-table-column>
      </el-table>
    </el-collapse-item>
  </el-collapse>

  <drag-dialog v-model="visible" :title="title">
    <el-form ref="form" label-position="right" label-suffix=":" label-width="100">
      <template v-if="eventType == 'message'">
        <el-form-item label="唯一标识">
          <el-input v-model="curEditEvent.id" />
        </el-form-item>
        <el-form-item label="消息名称">
          <el-input v-model="curEditEvent.name" />
        </el-form-item>
      </template>
      <template v-if="eventType == 'error'">
        <el-form-item label="唯一标识">
          <el-input v-model="curEditEvent.id" />
        </el-form-item>
        <el-form-item label="错误名称">
          <el-input v-model="curEditEvent.name" />
        </el-form-item>
        <el-form-item label="错误编码">
          <el-input v-model="curEditEvent.code" />
        </el-form-item>
      </template>
      <template v-if="eventType == 'signal'">
        <el-form-item label="唯一标识">
          <el-input v-model="curEditEvent.id" />
        </el-form-item>
        <el-form-item label="信号名称">
          <el-input v-model="curEditEvent.name" />
        </el-form-item>
        <el-form-item label="作用域">
          <el-radio-group v-model="curEditEvent.scope">
            <el-radio-button label="全局" value="global" />
            <el-radio-button label="当前实例" value="processInstance" />
          </el-radio-group>
        </el-form-item>
      </template>
      <template v-if="eventType == 'escalation'">
        <el-form-item label="唯一标识">
          <el-input v-model="curEditEvent.id" />
        </el-form-item>
        <el-form-item label="升级名称">
          <el-input v-model="curEditEvent.name" />
        </el-form-item>
        <el-form-item label="升级编码">
          <el-input v-model="curEditEvent.code" />
        </el-form-item>
      </template>
    </el-form>
    <dialog-footer @ok="submit" @cancel="cancel"></dialog-footer>
  </drag-dialog>
</template>

<script>
import { defineComponent } from 'vue';
import { cloneDeep } from 'lodash-es';
import { mapState } from 'pinia';
import modelerStore from '@wf/components/bpmnjs/store/modeler';
import {
  getGlobalMessageEventsValue,
  setGlobalMessageEventsValue,
  updateGlobalMessageEventsValue,
  deleteGlobalMessageEventsValue,
  getGlobalEscalationEventsValue,
  setGlobalEscalationEventsValue,
  updateGlobalEscalationEventsValue,
  deleteGlobalEscalationEventsValue,
  getGlobalSignalEventsValue,
  setGlobalSignalEventsValue,
  updateGlobalSignalEventsValue,
  deleteGlobalSignalEventsValue,
  getGlobalErrorEventsValue,
  setGlobalErrorEventsValue,
  updateGlobalErrorEventsValue,
  deleteGlobalErrorEventsValue
} from '@wf/components/bpmnjs/bo-utils/globalEventsUtil';

export default defineComponent({
  name: 'ElementEvents',
  data() {
    return {
      messageEvents: [],
      errorEvents: [],
      signalEvents: [],
      escalationEvents: [],
      visible: false,
      title: '',
      type: '', // 操作类型
      eventType: '', // 当前编辑事件类型
      curEditEvent: {} // 当前编辑的事件对象
    };
  },
  computed: {
    ...mapState(modelerStore, ['getActive', 'getActiveId'])
  },
  mounted() {
    this.getMessageEvents();
    this.getErrorEvents();
    this.getEscalationEvents();
    this.getSignalEvents();
  },
  methods: {
    // 消息事件操作
    getMessageEvents() {
      this.messageEvents = getGlobalMessageEventsValue() || [];
    },
    handleAddMessageEvent(event) {
      setGlobalMessageEventsValue(event);
      this.getMessageEvents();
    },
    handleUpdateMessageEvent(event) {
      updateGlobalMessageEventsValue(event);
      this.getMessageEvents();
    },
    handleDeleteMessageEvent(event) {
      deleteGlobalMessageEventsValue(event);
      this.getMessageEvents();
    },
    // 错误事件操作
    getErrorEvents() {
      this.errorEvents = getGlobalErrorEventsValue() || [];
    },
    handleAddErrorEvent(event) {
      setGlobalErrorEventsValue(event);
      this.getErrorEvents();
    },
    handleUpdateErrorEvent(event) {
      updateGlobalErrorEventsValue(event);
      this.getErrorEvents();
    },
    handleDeleteErrorEvent(event) {
      deleteGlobalErrorEventsValue(event);
      this.getErrorEvents();
    },
    // 信号事件操作
    getSignalEvents() {
      this.signalEvents = getGlobalSignalEventsValue() || [];
    },
    handleAddSignalEvent(event) {
      setGlobalSignalEventsValue(event);
      this.getSignalEvents();
    },
    handleUpdateSignalEvent(event) {
      updateGlobalSignalEventsValue(event);
      this.getSignalEvents();
    },
    handleDeleteSignalEvent(event) {
      deleteGlobalSignalEventsValue(event);
      this.getSignalEvents();
    },
    // 升级事件操作
    getEscalationEvents() {
      this.escalationEvents = getGlobalEscalationEventsValue() || [];
    },
    handleAddEscalationEvent(event) {
      setGlobalEscalationEventsValue(event);
      this.getEscalationEvents();
    },
    handleUpdateEscalationEvent(event) {
      updateGlobalEscalationEventsValue(event);
      this.getEscalationEvents();
    },
    handleDeleteEscalationEvent(event) {
      deleteGlobalEscalationEventsValue(event);
      this.getEscalationEvents();
    },
    handleAdd(type) {
      this.type = 'add';
      this.eventType = type;
      switch (type) {
        case 'message':
          this.title = '创建消息对象';
          break;
        case 'error':
          this.title = '创建错误对象';
          break;
        case 'signal':
          this.title = '创建信号对象';
          break;
        case 'escalation':
          this.title = '创建升级对象';
          break;
      }
      this.visible = true;
    },
    handleEdit(type, row) {
      this.type = 'edit';
      this.eventType = type;
      this.curEditEvent = cloneDeep(row);
      switch (type) {
        case 'message':
          this.title = '编辑消息对象';
          break;
        case 'error':
          this.title = '编辑错误对象';
          break;
        case 'signal':
          this.title = '编辑信号对象';
          break;
        case 'escalation':
          this.title = '编辑升级对象';
          break;
      }
      this.visible = true;
    },
    handleDelete(type, row) {
      switch (type) {
        case 'message':
          this.handleDeleteMessageEvent(row);
          break;
        case 'error':
          this.handleDeleteErrorEvent(row);
          break;
        case 'signal':
          this.handleDeleteSignalEvent(row);
          break;
        case 'escalation':
          this.handleDeleteEscalationEvent(row);
          break;
      }
    },
    submit() {
      if (this.type == 'add') {
        switch (this.eventType) {
          case 'message':
            this.handleAddMessageEvent(this.curEditEvent);
            break;
          case 'error':
            this.handleAddErrorEvent(this.curEditEvent);
            break;
          case 'signal':
            this.handleAddSignalEvent(this.curEditEvent);
            break;
          case 'escalation':
            this.handleAddEscalationEvent(this.curEditEvent);
            break;
        }
      } else {
        switch (this.eventType) {
          case 'message':
            this.handleUpdateMessageEvent(this.curEditEvent);
            break;
          case 'error':
            this.handleUpdateErrorEvent(this.curEditEvent);
            break;
          case 'signal':
            this.handleUpdateSignalEvent(this.curEditEvent);
            break;
          case 'escalation':
            this.handleUpdateEscalationEvent(this.curEditEvent);
            break;
        }
      }
      this.cancel();
    },
    cancel() {
      this.$refs.form.resetFields();
      this.curEditEvent = {};
      this.visible = false;
    }
  }
});
</script>
